<template>
  <div :id="echartId" class="w-100p h-100p"></div>
</template>
<script>

import * as echarts from 'echarts';

import color from '@/util/color';

export default {
  name: 'rsEcharts',
  data(){
    return {
      echartId: 'rs-charts-' + Math.floor(Date.now() * Math.random()),
      echartsInstance: null
    }
  },
  props: {
    option: {
      type: Object,
      default: null
    }
  },
  watch: {
    option: {
      deep: true,
      immediate: true,
      handler: function(){
        if(this.echartsInstance){
          this.setOption();
        }
      }
    }
  },
  mounted(){
    this.echartsInstance = echarts.init(document.getElementById(this.echartId) , null,{
      width: 'auto',
      height: 'auto'
    });
    if(this.option){
      this.setOption();
    }
    window.addEventListener('resize' , this.resize.bind(this));
    this.echartsInstance.resize();

  },
  destroyed(){
    window.removeEventListener('resize' , this.resize.bind(this));
  },
  methods: {
    setOption(){
      this.echartsInstance.setOption({
        color: color.color,
        ...this.option
      });
      this.echartsInstance.resize();
    },
    resize(){
      this.echartsInstance.resize();
    }
  }
}
</script>